<template>
  <a-modal  :width='800'
  title="付款信息"
  :visible="visible"
  @ok="handleOk"
  :confirmLoading="confirmLoading"
  @cancel="handleCancel"
  >
      <h3  class='fontWeight' > 
        当前您的角色为 
        <span v-if='transactionType == 1' >贸易商（{{baseInfo.latterCom}}）： 垫付款给供应商（{{baseInfo.formerCom}}）</span>
        <span v-if='transactionType == 2' >贸易商（{{baseInfo.latterCom}}）： 付款给经销商（{{baseInfo.formerCom}}）</span>
        <span v-if='transactionType == 3' >贸易商（{{baseInfo.formerCom}}）： 收到买方打款（{{baseInfo.latterCom}}）</span>
        
      </h3>

      <!-- <a-row  v-if='creditData.LastQuota'>
          <span  class='color-red'>*</span>本合同买方授信余额为<span  class='color-red'>
          {{creditData.LastQuota}}{{creditData.CreditLineUnit | moneyUnit}}</span>
          ，单笔最高授信额度为<span  class='color-red'>{{creditData.EachMaxQuota}}{{creditData.CreditLineUnit | moneyUnit}}</span>
      </a-row>
      <a-row v-else  class='color-red'>*本合同买方授信余额未录入</a-row> -->
      <a-form  :form='form'  class='mt12'>
        <a-row>
          <a-col  :span='12'>
              <a-form-item label='付款方' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" style='margin-bottom: 5px'>
                  贸易商（{{baseInfo.latterCom}}）
                  <a-input  v-decorator='["payer",baseform.payer]'  style='display: none;'/> 
              </a-form-item>
              <div >账户信息修改 <a-icon type="edit" class='cursor'  @click='accountShow(baseform.payer.initialValue)'/></div>
              <a-row  v-show='buyerBankwrite'> 
                  <a-form-item label='付款银行' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" style='margin-top: 10px;'>
                      <a-input  v-decorator='["payerBankName",baseform.payerBankName]'/>
                  </a-form-item>
                  <a-form-item label='账户名称' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payerAccountName",baseform.payerAccountName]'/>
                  </a-form-item>
                  <a-form-item label='付款账号' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payerBankAccount",baseform.payerBankAccount]'/>
                  </a-form-item>
                  <a-form-item label='SWIFT' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payerSwift",baseform.payerSwift]'/>
                  </a-form-item>
              </a-row>
              <a-row v-if='buyerBank && !buyerBankwrite'>
                  <a-form-item label='付款银行' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" style='margin-top: 10px;margin-bottom:10px '>
                      {{defaultBuyerBank.bankName}}
                  </a-form-item>
                  <a-form-item label='账户名称' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol"  style='margin-top: 10px;margin-bottom:10px '>
                      {{defaultBuyerBank.accountName}}
                  </a-form-item>
                  <a-form-item label='付款账号' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol"  style='margin-top: 10px;margin-bottom:10px '>
                      {{defaultBuyerBank.bankAccount}}
                  </a-form-item>
                  <a-form-item label='SWIFT' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol"  style='margin-top: 10px;margin-bottom:10px '> 
                      {{defaultBuyerBank.swift}}
                  </a-form-item>
              </a-row>
              <a-form-item label='付款金额' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" > 
                      <a-select   style="width: 30%"  v-model='amtUnitA'  @change='(val)=>change(val)'>  
                        <a-select-option value="1">USD</a-select-option>
                        <a-select-option value="2">GBP</a-select-option>
                        <a-select-option value="3">EUR</a-select-option>
                        <a-select-option value="4">HKD</a-select-option>
                        <a-select-option value="5">CNY</a-select-option>
                      </a-select>
                      <a-input style="width: 70%"   v-decorator='["amt",baseform.amt]'/> 
              </a-form-item>
              <a-form-item  style='display: none;'>
                  <a-input  v-decorator='["amtUnitA",baseform.amtUnitA]'  />
              </a-form-item>

              <a-form-item label='汇率' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                  <a-input  v-decorator='["exchangeRate"]'/>
              </a-form-item>
          </a-col>
          <a-col  :span='12'>
              <a-form-item label='收款方' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" style='margin-bottom: 5px'>
                  <span v-if='transactionType==1'>供应商</span> 
                  <span v-if='transactionType==2'>经销商</span>（{{baseInfo.formerCom}}）
                  <a-input  v-decorator='["payee",baseform.payee]'  style='display: none;'/> 
              </a-form-item>
              <div >账户信息修改 <a-icon type="edit" class='cursor'  @click='accountShow(baseform.payee.initialValue)'/></div>
              <a-row  v-show='sellerBankwrite'>
                  <a-form-item label='收款银行' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payeeBankName",baseform.payeeBankName]'/>
                  </a-form-item>
                  <a-form-item label='账户名称' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payeeAccountName",baseform.payeeAccountName]'/>
                  </a-form-item>
                  <a-form-item label='收款账号' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payeeBankAccount",baseform.payeeBankAccount]'/>
                  </a-form-item>
                  <a-form-item label='SWIFT' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                      <a-input  v-decorator='["payeeSwift",baseform.payeeSwift]'/>
                  </a-form-item>
              </a-row>
              <a-row v-if='sellerBank && !sellerBankwrite'>
                  <a-form-item label='付款银行' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" style='margin-top: 10px;margin-bottom:10px '>
                      {{defaultSellerBank.bankName}}
                  </a-form-item>
                  <a-form-item label='账户名称' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol"  style='margin-top: 10px;margin-bottom:10px '>
                      {{defaultSellerBank.accountName}}
                  </a-form-item>
                  <a-form-item label='付款账号' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol"  style='margin-top: 10px;margin-bottom:10px '>
                      {{defaultSellerBank.bankAccount}}
                  </a-form-item>
                  <a-form-item label='SWIFT' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol"  style='margin-top: 10px;margin-bottom:10px '> 
                      {{defaultSellerBank.swift}}
                  </a-form-item>
              </a-row>
              <a-form-item label='上传凭据' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >   
                  <fileUpload   :fileList='fileData'  v-on:uploading='($event)=>{fileData = $event.fileList}'  v-on:done='finished_upload($event)' v-on:removeFile=' removeFile_fromList($event,fileData)' ></fileUpload> 
                   <a-checkbox   v-decorator="['fileVOList',baseform.fileVOList]"  style='display: none;' ></a-checkbox>
              </a-form-item>
              <a-form-item label='备注' :label-col='formLayout.labelCol'  :wrapper-col="formLayout.wrapperCol" >
                  <a-textarea rowspan='5' autosize  v-decorator="['remark']"  />
                </a-form-item>
          </a-col> 
        </a-row> 
        <a-form-item>
                  <a-input  v-decorator='["orderCode",baseform.orderCode]'  style='display: none;'/> 
                  <a-input  v-decorator='["transactionCode",baseform.transactionCode]'  style='display: none;'/> 
                  <a-input  v-decorator='["prjCode",baseform.prjCode]'  style='display: none;'/> 
          </a-form-item>
      </a-form>
      <span  class='color-red'>*</span>线上仅显示收付款状态，不负责真实现金交易</span>
      <accountModify  ref='accountModal'  :visible='accountVisible' v-on:handleOk='changeBank(arguments)' v-on:handleCancel='accountVisible=false'  v-on:write='writeBank($event)'></accountModify>
  </a-modal>
</template>

<script>
import  { submitPayment,getEntCredit }  from  '@/api/order/index'
import  { getEntBank }  from  '@/api/customer/index'
import moment  from  'moment'

import  fileUpload  from  '@/components/common/fileUpload'
import  accountModify  from  '@/components/order/accountModify'
export default {
  name: 'orderPayMent',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      // entCode:{
      //   type:String,
      //   default:''
      // }
  },
  data () {
    return {
      confirmLoading: false,
      accountVisible:false,
      formLayout:{
        labelCol:{ span:5 },
        wrapperCol:{ span:16 }
      },

      transactionType:'',/*当前交易关系*/
      /*收付款双方 名称显示*/
      baseInfo:{
        formerCom:'',
        latterCom:''
      }, 
      creditData:{},//授信额度
      baseform:{
        orderCode:{initialValue:''},
        transactionCode:{initialValue:''},
        prjCode:{initialValue:''},

        payer:{initialValue:''},
        payerBankName:{initialValue:'', rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        payerAccountName:{initialValue:'', rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        payerBankAccount:{initialValue:'', rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        amtUnitA:{initialValue:'1'},
        amt:{rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        

        payee:{initialValue:''},
        payeeBankName:{initialValue:'', rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        payeeAccountName:{initialValue:'', rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        payeeBankAccount:{initialValue:'', rules:[{required:true,message:'当前为必填项'},{ whitespace : true ,message:'当前输入不能为空'} ]},
        fileVOList:{initialValue:[]},
 
      },
      fileData:[],//文件data
      amtUnitA:'1',  //v-model

      buyerBank:[],
      sellerBank:[],
      defaultBuyerBank:{},
      defaultSellerBank:{},
      buyerBankwrite:false,
      sellerBankwrite:false,
       
    }
  },
  methods:{
    /*2019.12.31 waiting...*/
    pageInit(code,num){
        getEntBank(code).then((res)=>{
          if(res.data.flag == true){
              if(num==1){
                  this.buyerBank = res.data.dataList
                  /*Ent exit bankdata*/
                  if(this.buyerBank.length>0){
                       this.buyerBank.filter((item,index)=>{ 
                          /*one and only */
                          if(item.defaultFlag==1){
                            this.defaultBuyerBank = this.buyerBank[index]
                            this.form.setFieldsValue({
                                payerBankName:this.defaultBuyerBank.bankName,
                                payerAccountName:this.defaultBuyerBank.accountName,
                                payerBankAccount:this.defaultBuyerBank.bankAccount,
                                payerSwift:this.defaultBuyerBank.swift,
                            })
                          }
                      }) 
                  }
                  /*Ent Noexit bankdata*/
                  else{
                      this.buyerBankwrite = true
                      this.form.resetFields()
                  } 
              }
              if(num == 2){
                this.sellerBank = res.data.dataList
                if(this.sellerBank.length>0){
                    this.sellerBank.filter((item,index)=>{
                        if(item.defaultFlag==1){
                            this.defaultSellerBank = this.sellerBank[index]
                            this.form.setFieldsValue({
                              payeeBankName:this.defaultSellerBank.bankName,
                              payeeAccountName:this.defaultSellerBank.accountName,
                              payeeBankAccount:this.defaultSellerBank.bankAccount,
                              payeeSwift:this.defaultSellerBank.swift,
                            })
                        }
                    })
                }
                else{
                    this.sellerBankwrite = true
                    this.form.resetFields()
                } 
                
              }
          }
        })
    },
    //提交 信息
    handleOk(e) {
      let that = this  
      this.form.validateFields((err, values) => {
          if (!err) { 
            console.log(values)
            this.confirmLoading = true; 
            submitPayment(values).then((res)=>{
                if(res.data.flag == true){
                  this.$message.success(res.data.msg)
                  this.$emit('handleOk')
                }
                this.confirmLoading = false; 
            })
          }
          else{
            console.log(err)
          }
      });
    },
    handleCancel(e) {
      this.$emit('handleCancel') 
    },
    change(val){
       this.form.setFieldsValue({
          amtUnitA:val
       })
    },
    accountShow(entCode){
        this.accountVisible = true
        this.$refs.accountModal.$emit('openDialog',entCode)
    },
    changeBank(arg){
      let bankform = arg[0]
      let entCode = arg[1]
      if(entCode == this.baseform.payer.initialValue){
        this.defaultBuyerBank = bankform
        this.buyerBankwrite = false
        this.form.setFieldsValue({
          payerBankName:this.defaultBuyerBank.bankName,
          payerAccountName:this.defaultBuyerBank.accountName,
          payerBankAccount:this.defaultBuyerBank.bankAccount,
          payerSwift:this.defaultBuyerBank.swift,
        })
      }
      if(entCode == this.baseform.payee.initialValue){
        this.defaultSellerBank = bankform
        this.sellerBankwrite = false
        this.form.setFieldsValue({
          payeeBankName:this.defaultSellerBank.bankName,
          payeeAccountName:this.defaultSellerBank.accountName,
          payeeBankAccount:this.defaultSellerBank.bankAccount,
          payeeSwift:this.defaultSellerBank.swift,
        })
      }
      this.$message.success('银行信息已更新')
      this.accountVisible = false
    },
    writeBank(entCode){
      if(entCode == this.baseform.payer.initialValue){
        this.buyerBankwrite = true
        this.form.setFieldsValue({
          payerBankName:'',
          payerAccountName:'',
          payerBankAccount:'',
          payerSwift:'',
        })
      }
      if(entCode == this.baseform.payee.initialValue){
        this.sellerBankwrite = true
        this.form.setFieldsValue({
          payeeBankName:'',
          payeeAccountName:'',
          payeeBankAccount:'',
          payeeSwift:'',
        })
      } 
      this.accountVisible = false
    },
    /*功能函数*/
 
    finished_upload(e){ 
      // console.log(e)
      let data = this.ReFileCodeToSub(this.fileData) 
      console.log(data)
      this.baseform.fileVOList.initialValue = data
    },
    
 
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(data,buyent){ 

        /*收付款双方*/
        data.entList.forEach((item)=>{ 
          item.code == data.buyer ? this.baseInfo.formerCom = item.name :''
          item.code == data.seller ? this.baseInfo.latterCom = item.name :''
        })
        /*收付款双方交易关系 供-代理 代理-代理*/
        this.transactionType = data.transactionType

        /*对应的相关订单*/
        this.baseform.orderCode.initialValue = data.orderCode
        this.baseform.transactionCode.initialValue = data.code
        this.baseform.prjCode.initialValue = data.prjCode
        this.baseform.payer.initialValue = data.seller
        this.baseform.payee.initialValue = data.buyer
 
        /*清空表单输入和校验*/
        this.form.resetFields()
        this.fileData=[]
        this.buyerBankwrite = false
        this.sellerBankwrite = false

        //请求本合同买方授信额度
        // getEntCredit(buyent).then((res)=>{
        //   // console.log(res)
        //     if(res == false){
        //         this.$info({
        //             title: '提示',
        //             content: '本合同买方授信额度尚未录入，请注意款项额度',
        //             okText:'知道了'
        //           }); 
        //         return false
        //     }
        //     else if(res.data.flag == true){
        //       this.creditData = res.data.data 
        //     } 
        // }) 
        this.pageInit(data.seller,1)//付款方
        this.pageInit(data.buyer,2)//收款方
        
      })
       
    })
  },
 
  beforeCreate () {
    this.form = this.$form.createForm(this); 
  },
  components:{
    fileUpload,
    accountModify
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>
